<template>
  <div id="uesrtext">
    <input type="file" placeholder="商品图片" id="photo" ref="photo">
    <el-button type="primary" round size="mini" @click="upload">上传</el-button>
    <textarea placeholder="按 Ctrl + Enter 发送" v-model="content" @keyup.enter="addMessage"></textarea>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'uesrtext',
  data () {
    return {
      content:''
    }
  },

  computed: mapState([
    'currentSession'
  ]),
  methods: {
  	addMessage (e) {
  		if (e.ctrlKey && e.keyCode ===13 && this.content.length) {
            let msgObj = new Object();
            msgObj.to = this.currentSession.username;
            msgObj.content = this.content;
            this.$store.state.stomp.send('/ws/chat',{},JSON.stringify(msgObj));
            this.$store.commit('addMessage',msgObj);
            this.content = '';
  		}
  	},
    upload(){
        let f = this.$refs.photo;
        let param = new FormData();
        param.append('img', f.files[0]);
        param.append("to",this.currentSession.username);
        let config = {
            headers: { 'Content-Type': 'multipart/form-data' }
        };
        this.$http.post("/ws/upload/image",param,config).then(resp=>{
            // if(resp && resp.code == 0){
            //     this.$store.commit('addMessage',JSON.parse(resp.data));
            // }
            // console.log(resp);
        })
    }
  }
}
</script>

<style scoped>
#uesrtext {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 30%;
    border-top: solid 1px #DDD;
}

textarea {
    padding: 10px;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}
</style>
